<template>
    <view class="container">
        <view :class="{ 'card-animate': showAnimation }" style="animation-delay: 0.1s;">
            欢迎使用
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'

// 状态定义 -------------------------------------------------------------
const loading = ref(false) // 加载状态
const showAnimation = ref(false) // 动画状态

// 生命周期钩子 ------------------------------------------------------------
onMounted(() => {
    init()
})

onShow(() => {
    // 页面载入后，延时显示动画
    setTimeout(() => {
        showAnimation.value = true;
    }, 100);
})

onHide(() => {
    // 页面隐藏时，重置动画状态
    showAnimation.value = false;
})

// 方法定义 --------------------------------------------------------
const init = async () => {
    try {
        loading.value = true
        // 初始化逻辑
    } catch (error) {
        console.error(error)
        uni.showToast({
            title: '操作失败',
            icon: 'none'
        })
    } finally {
        loading.value = false
    }
}
</script>

<style lang="scss" scoped>
.container {
    padding: 40rpx;
    min-height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

// 动画效果
.card-animate {
    opacity: 0;
    transform: translateY(20rpx);
    animation: fadeInUp 0.5s forwards;
}

.cancel-login {
    color: #2b92ff;
    text-align: center;
    letter-spacing: 5rpx;
    font-size: 32rpx;
    margin-top: 40rpx;
    width: 100%;
    border-radius: 30rpx;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30rpx);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>